import { useEffect, useRef } from 'react';
import { AlertTriangle, Zap, Lightbulb } from 'lucide-react';
import './Confirm.css';

/**
 * Confirm 确认对话框组件
 * @param {string} title - 标题
 * @param {string} message - 确认消息
 * @param {string} type - 类型：danger, warning, info
 * @param {string} confirmText - 确认按钮文字
 * @param {string} cancelText - 取消按钮文字
 * @param {function} onConfirm - 确认回调
 * @param {function} onCancel - 取消回调
 */
export const Confirm = ({
  title = '确认',
  message,
  type = 'info',
  confirmText = '确认',
  cancelText = '取消',
  onConfirm,
  onCancel
}) => {
  const modalRef = useRef(null);

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') {
        onCancel?.();
      }
    };

    const handleClickOutside = (e) => {
      if (modalRef.current && !modalRef.current.contains(e.target)) {
        onCancel?.();
      }
    };

    document.addEventListener('keydown', handleEscape);
    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [onCancel]);

  const iconComponents = {
    danger: <AlertTriangle size={56} strokeWidth={2} />,
    warning: <Zap size={56} strokeWidth={2} />,
    info: <Lightbulb size={56} strokeWidth={2} />
  };

  return (
    <div className="confirm-overlay">
      <div ref={modalRef} className={`confirm-modal confirm-${type}`}>
        <div className="confirm-icon">
          {iconComponents[type] || iconComponents.info}
        </div>
        <div className="confirm-content">
          <h3 className="confirm-title">{title}</h3>
          <p className="confirm-message">{message}</p>
        </div>
        <div className="confirm-actions">
          <button 
            className="confirm-btn confirm-btn-cancel"
            onClick={onCancel}
            autoFocus
          >
            {cancelText}
          </button>
          <button 
            className={`confirm-btn confirm-btn-confirm confirm-btn-${type}`}
            onClick={onConfirm}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};

